<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        
        <script type="text/javascript" src="/script/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="/script/jquery_center.js"></script>
        <script>
        function logout()
        {
            alert("Chamou!!!");
            document.getElementById("logoutBtn").click();
        }
        </script>
            
    </h:head>
    <h:body onunload="logout();">
        <div id="central">
            <h:form id="topForm">
                <table width="100%">
                    <tr>
                        <td align="left"><h:outputText value="Welcome: #{p:remoteUser()}" style="text-height:20"/></td>
                        <td align="right"><p:commandButton action="#{genericBackBean.logout}" id="logoutBtn" icon="ui-icon-power" /></td>
                    </tr>
                </table>

                <p:stack icon="/images/stack.png">  
                    <p:menuitem value="Users" icon="/images/aperture.png" url="/user/userList.xhtml"/>  
                    <p:menuitem value="Customers" icon="/images/photoshop.png" url="/customer/customerList.xhtml"/>  
                    <p:menuitem value="Receipts" icon="/images/coda.png" url="/receipt/receiptList.xhtml"/>  
                    <p:menuitem value="Shipments" icon="/images/safari.png" url="#" />  
                    <p:menuitem value="Reports" icon="/images/finder.png" url="#" />  
                </p:stack> 
            </h:form>
    </div>
        <script>
            $("#central").center();
        </script>
    </h:body>
</html>